<template>
  <div>
    <div class="select_top">
      <el-input v-model="queryname" clearable @keyup.native.enter="getProjectList" placeholder="请输入项目名称、所属指标搜"
        style="width:29%;margin:10px 12px 0 0"
      ></el-input>
      <el-select v-model="qtbm" clearable placeholder="牵头部门" style="width:14%">
        <el-option
          v-for="item in qtSelect"
          :key="item.hash.orgid"
          :label="item.hash.orgname"
          :value="item.hash.orgid"
        >
        </el-option>
      </el-select>
      <el-select v-model="zrbm" clearable placeholder="责任单位" style="width:14%">
        <el-option
          v-for="item in zrSelect"
          :key="item.hash.orgid"
          :label="item.hash.orgname"
          :value="item.hash.orgid"
        >
        </el-option>
      </el-select>
      <el-button @click="getProjectList">检索</el-button>
    </div>
    <el-table
      :data="projectList"
      style="width: 92%;font-size:13px;margin:0 auto"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.nname"
        label="所属指标"
      >
      </el-table-column>
      <el-table-column
        prop="hash.pname"
        label="项目名称"
      >
      </el-table-column>
      <el-table-column
        prop="hash.lbname"
        label="所属类别"
      >
      </el-table-column>
      <el-table-column
        prop="hash.qtbm"
        label="牵头部门"
      >
      </el-table-column>
      <el-table-column
        prop="hash.zrbm"
        label="责任单位"
      >
      </el-table-column>
      <el-table-column
        label="计划日期"
        :formatter="tabTimeFormat"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <!-- <el-button
            type="primary"
            size="small"
            @click="changeXM(scope.row)"
          >
            编辑
          </el-button> -->
          <el-button
            type="primary"
            size="small"
            @click="checkXM(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="currentPage3"
      :pageSize="pagesize"
      layout="prev, pager, next, jumper"
      :total="total"
      style="text-align:center"
    >
    </el-pagination>
    <el-dialog
      title="查看"
      :visible.sync="showUncheck2"
    >
      <editXm :xmid="xmid" ref="child" v-if="isRouterAlive"></editXm>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showUncheck2 = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import qqmap from '~/components/common/qqmap.vue';
import editXm from '~/components/common/editXm.vue';

export default {
  data() {
    return {
      currentPage3: 1,
      pagesize: 10,
      total: 10,
      ts: this.newStore(),
      showUncheck2: false,
      qtbm: '',
      zrbm: '',
      pname: '',
      projectList: [],
      showMap: false,
      innerVisible1: false,
      isRouterAlive: true,
      loading: true,
      loading2: true,
      xmData: {},
      showT: false,
      showT2: false,
      showT3: false,
      qtSelect: [],
      zrSelect: [],
      xmList: [],
      queryname: '',
    };
  },
  components: {
    qqmap,
    editXm,
  },
  created() {
    this.getProjectList();
    this.getSelect();
  },
  computed: {
    point() {
      const a = this.chooseLocal.lat;
      const b = this.chooseLocal.lng;
      return `${a},${b}`;
    },
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    checkXM(item) {
      this.reload();
      this.showUncheck2 = true;
      this.xmid = item.hash.id;
    },
    handleCurrentChange() {
      this.getProjectList();
    },
    goPage2() {
      if (this.$route.path == '/performance/assess') {
        this.$router.push('assess2');
      } else {
        this.$router.push('grade2');
      }
    },
    // 获取列表数据
    getProjectList() {
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680F5DF1D3E83A2A1BAC3633CA4D2BCBCC5',
        queryname: this.queryname,
        orgid: this.zrbm,
        assessunit: this.qtbm,
        start: (this.currentPage3 - 1) * this.pagesize,
        limit: this.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.projectList = ts.d.data.operation1;
        this.total = parseInt(ts.d.data.operation2[0].hash.allrs);
        // this.projectList.forEach(element => {
        //   element.hash.dateArr= element.hash.begindate+'~'+element.hash.enddate;
        // });
      });
    },
    // 表格里计划日期格式化
    tabTimeFormat(row, column) {
      const begindate = row.hash.begindate.replace(/\-/g, '/');
      const enddate = row.hash.enddate.replace(/\-/g, '/');
      const data = `${begindate}~${enddate}`;
      return data;
    },
    getSelect() {
      const req4 = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BC327730680009A98',
        suporgid: '1',
      };
      const req5 = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BC327730680009A98',
        suporgid: '2',
      };
      this.spost(this.ts, '/mainservlet', req4).then((ts) => {
        this.qtSelect = ts.d.data.operation1;
      });
      this.spost(this.ts, '/mainservlet', req5).then((ts) => {
        this.zrSelect = ts.d.data.operation1;
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.line
  border-bottom 1px solid #ccc
  font-size 18px
  text-align center
  margin 20px 0
  padding-bottom 5px
  color black
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>
